<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据看板</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="./dataBoard.css?t=0521">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script src="../js/vue-count-to.min.js?t=0517"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>
<style>
    /* 媒体查询 */
    /* @media only screen and (max-width: 1260px) {
        .container {
            padding-left: 278px;
        }

        .list-container {
            width: 278px;
        }
    }

    @media only screen and (min-width: 1261px) and (max-width: 1590px) {
        .container {
            padding-left: 328px;
        }

        .list-container {
            width: 328px;
        }
    }

    @media only screen and (min-width: 1590px) {
        .container {
            padding-left: 478px;
        }

        .list-container {
            width: 478px;
        }

        .inter-select-container {
            width: 1208px;
            margin: 0 auto;
        }
    } */
</style>

<body>
    <div id="app" class="container" style="display: none;" v-show="isAppShow">
        <!--列表-->
        <div class="list-container">
            <div class="list-container-inner">
                <!--待办任务-->
                <div class="todo-task-container">
                    <div class="todo-task-title">
                        <div class="title-left">
                            <img src="../img/data_board_icon.png" alt="" class="title-left-icon">
                            <span>待办任务({{todoTaskTotal}})</span>
                        </div>
                        <!-- <div class="title-right">
                            <span>查看更多</span>
                            <img src="../img/data_board_more.png" alt="" class="title-right-icon">
                        </div> -->
                    </div>

                    <div class="todo-task-list" style="overflow:auto" v-infinite-scroll="getTodoTaskList"
                        infinite-scroll-disabled="todoDisabled">
                        <div class="todo-item" v-for="(item, index) in todoTaskList" :key="index"
                            @click="showCheckWorkDialog(item.Taskid)">
                            <div class="todo-item-icon">
                                <img src="../img/data_board_task_icon.png" alt="" class="todo-item-icon-img">
                            </div>
                            <div class="todo-item-desc">
                                <div class="todo-item-title">
                                    {{item.PreUserRealName}}{{item.ActivityName}}{{item.ExtraInfo2}}</div>
                                <div class="todo-item-date">{{item.DateAccepted}}</div>
                            </div>
                        </div>
                        <div class="todo-request-text" v-if="todoIsLoading">加载中...</div>
                        <div class="todo-request-text" v-if="todoNoMore">没有更多了</div>
                    </div>
                </div>
            </div>

        </div>

        <!--数据-->
        <div class="data-container">
            <div class="tab-list" @click="changeTabIndex">
                <div class="tab-item" data-idx="0" :class="[tabIndex === 0 ? 'active' : '']">工作台</div>
                <div class="tab-item" data-idx="1" :class="[tabIndex === 1 ? 'active' : '']">原材料统计</div>
                <div class="tab-item" data-idx="2" :class="[tabIndex === 2 ? 'active' : '']">风险管控</div>
                <div class="tab-item" data-idx="3" :class="[tabIndex === 3 ? 'active' : '']">物联网</div>
            </div>

            <transition name="primary-fade">
                <div class="main-container" v-show="tabIndex === 0">
                    <!--工作台-->
                    <div class="main-container-inner">
                        <div class="main-container-inner-no-data"
                            v-if="curProgressList.length === 0 && mainList.length === 0">当前暂无数据</div>
                        <!--主体选择-->
                        <div class="main-select-tab" v-if="mainList.length > 0">
                            <div class="select-item" v-for="(item, index) in mainList" :key="index"
                                :class="[mainIndex === index ? 'active' : '']" @click="changeMainIndex(index)">
                                {{item.name}}
                            </div>
                        </div>
                        <div class="main-show-container">
                            <div class="content-box">
                                <div class="content-box-inner" v-if="curProgressList.length > 0">
                                    <div class="floor-container">
                                        <div class="floor-name-container">
                                            <!--地上-->
                                            <div class="floor-name-item"
                                                v-for="(item,index) in curProgressList[0].topFloorList" :key="index">
                                                <span>{{item.floorName}}{{index === 0 ? '' : '楼'}}</span>
                                            </div>
                                            <!--中间-->
                                            <div class="floor-name-item-middle"></div>
                                            <!--地下-->
                                            <div class="floor-name-item"
                                                v-for="(item,index) in curProgressList[0].downFloorList" :key="index">
                                                <span>{{item.floorName}}楼</span>
                                            </div>
                                        </div>

                                        <div class="floor-detail-container">
                                            <div class="floor-detail-item" v-for="(process,idx) in curProgressList"
                                                :key="idx">
                                                <!--每一列的每一行-->
                                                <!--地上-->
                                                <div class="detail-item-row"
                                                    v-for="(floor, index) in process.topFloorList">
                                                    <el-popover placement="right" width="150" trigger="click"
                                                        @show="getCurProcessChildrenList(floor.id)">
                                                        <div class="pop-container">
                                                            <div class="pop-top">
                                                                <div class="process-children">
                                                                    <div class="process-child"
                                                                        v-for="(item, index) in curProcessChildrenList"
                                                                        @click="changeChildProcessSelect(item,index)"
                                                                        :class="[item.status === 0 ? 'doing' : '', item.status === 1 ? 'finished' : '']">
                                                                        {{item.name}}</div>
                                                                </div>
                                                            </div>
                                                            <div class="process-all-select" @click="allSelectOperate">全选
                                                            </div>
                                                            <div class="pop-bottom">
                                                                <div class="pop-update-btn"
                                                                    @click="updateProcessChildren(floor)">更新进度</div>
                                                            </div>
                                                        </div>
                                                        <!--颜色按钮展示-->
                                                        <div slot="reference" class="detail-item-row-status"
                                                            :class="[floor.status === 0 ? 'not-start' : '', floor.status === 1 ? 'doing' : '', floor.status === 2 ? 'finished' : '']">
                                                        </div>
                                                    </el-popover>
                                                </div>
                                                <!--中间-->
                                                <div class="detail-item-row-middle"></div>
                                                <!--地下-->
                                                <div class="detail-item-row"
                                                    v-for="(floor, index) in process.downFloorList">
                                                    <el-popover placement="right" width="150" trigger="click"
                                                        @show="getCurProcessChildrenList(floor.id)">
                                                        <div class="pop-container">
                                                            <div class="pop-top">
                                                                <div class="process-children">
                                                                    <div class="process-child"
                                                                        v-for="(item, index) in curProcessChildrenList"
                                                                        @click="changeChildProcessSelect(item,index)"
                                                                        :class="[item.status === 0 ? 'doing' : '', item.status === 1 ? 'finished' : '']">
                                                                        {{item.name}}</div>
                                                                </div>
                                                                <div class="process-all-select"
                                                                    @click="allSelectOperate">全选
                                                                </div>
                                                            </div>
                                                            <div class="pop-bottom">
                                                                <div class="pop-update-btn"
                                                                    @click="updateProcessChildren(floor)">更新进度</div>
                                                            </div>
                                                        </div>
                                                        <!--颜色按钮展示-->
                                                        <div slot="reference" class="detail-item-row-status"
                                                            :class="[floor.status === 0 ? 'not-start' : '', floor.status === 1 ? 'doing' : '', floor.status === 2 ? 'finished' : '']">
                                                        </div>
                                                    </el-popover>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="floor-footer-container">
                                            <!--地上-->
                                            <div class="floor-footer-item"
                                                v-for="(item,index) in curProgressList[0].topFloorList" :key="index">
                                            </div>
                                            <!--中间-->
                                            <div class="floor-footer-middle"></div>
                                            <!--地下-->
                                            <div class="floor-footer-item"
                                                v-for="(item,index) in curProgressList[0].downFloorList" :key="index">
                                            </div>
                                        </div>

                                    </div>


                                    <!--工序列表-->
                                    <div class="process-list">
                                        <div class="process-head"></div>
                                        <div class="process-item" v-for="item in processList" :key="item.id">
                                            {{item.name}}
                                        </div>
                                        <div class="process-footer"></div>
                                    </div>

                                </div>
                            </div>
                            <div class="side-box">
                                <!-- <div class="side-setting-btn">设置</div> -->
                                <div class="side-status-list">
                                    <div class="side-status-item" v-for="(item, index) in statusList" :key="index">
                                        <span class="item-icon" :style="{background: item.color}"></span>
                                        <span class="item-text">{{item.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-list" v-show="tabIndex === 0">
                        <div class="btn-head">
                            <div class="btn-head-title">
                                <img src="../img/data_board_icon.png" alt="" style="width:18px; height: 18px;">
                                <span style="margin-left: 10px;">运营快捷入口</span>
                            </div>
                        </div>
                        <div class="btn-container">
                            <div class="btn-container-inner">
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(1)">
                                        <img src="../img/entry_sgzjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">总施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(2)">
                                        <img src="../img/entry_jdsgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">阶段施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(3)">
                                        <img src="../img//entry_clcgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料采购计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(4)">
                                        <img src="../img/entry_cgdd.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">采购订单</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(5)">
                                        <img src="../img/entry_cljc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料进场</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(6)">
                                        <img src="../img/entry_clly.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料领用</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(7)">
                                        <img src="../img/entry_clkc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料库存</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            <!--原材料统计-->
            <transition name="primary-fade">
                <div class="material-statistics-container" v-show="tabIndex === 1">
                    <div class="material-detail">
                        <div class="material-detail-inner">
                            <div class="material-item" v-for="(item, index) in materialUseStatusList" :key="index"
                                v-if="materialUseStatusList.length > 0">
                                <div class="material-item-head">
                                    <div class="material-title">{{item.materialName}}</div>
                                    <div class="material-total">工程总需用量:<span
                                            class="material-value">{{item.totalCount}}</span>{{item.unit}}</div>
                                </div>

                                <div class="material-item-body">
                                    <div class="material-plan">已有施工计划需用量:<span
                                            class="material-value-black">{{item.cpmCount}}</span>{{item.unit}}</div>
                                    <div class="material-row">
                                        <div class="material-row-item">当前已消耗量:<span
                                                class="material-value-black">{{item.consumptionCount}}</span>{{item.unit}}
                                        </div>
                                        <div class="material-row-item">当前库存:<span
                                                class="material-value-black">{{item.stockCount}}</span>{{item.unit}}
                                        </div>
                                    </div>
                                    <div class="material-row">
                                        <div class="material-row-item">已采购:<span
                                                class="material-value-black">{{item.purchaseCount}}</span>{{item.unit}}
                                        </div>
                                        <div class="material-row-item">总进场:<span
                                                class="material-value-black">{{item.entryCount}}</span>{{item.unit}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="material-detail-no-data" v-else>当前暂无材料信息</div>
                        </div>
                    </div>

                    <div class="storage-prview">
                        <div class="storage-head">
                            <div class="storage-head-title">
                                <img src="../img/data_board_icon.png" alt="" class="storage-head-icon">
                                <span>仓库预览</span>
                            </div>
                            <div class="storage-icon-list">
                                <div class="storage-icon-item">
                                    <img src="../img/icon33.png" alt=""
                                        style="width: 24px; height: 30px; margin-right: 10px;">
                                    <span>仓库</span>
                                </div>
                                <div class="storage-icon-item">
                                    <img src="../img//icon23.png" alt=""
                                        style="width: 24px; height: 30px; margin-right: 10px;">
                                    <span>堆场</span>
                                </div>
                                <div class="storage-icon-item">
                                    <img src="../img/icon13.png" alt=""
                                        style="width: 17px; height: 29px; margin-right: 10px;">
                                    <span>临时堆放点</span>
                                </div>
                            </div>
                        </div>

                        <div class="storage-body" id="storage-container">
                            <div class="storage-body-no-data" v-if="!storageImgData.url">暂无仓库信息</div>
                            <div id="img-container" class="storage-show-container" v-else>
                                <img :src="storageImgData.url" alt="" style="width: 100%;" v-if="storageImgData.url">
                                <div class="storage-mask" v-if="storageImgData.url">
                                    <el-popover placement="top-start" width="295" trigger="click"
                                        v-for="(item, index) in allStorageList" :key="index"
                                        @show="showStorageDetail(item)" @hide="clearCurStorageMaterialAllInfo">
                                        <div class="storage-pop-container">
                                            <div class="storage-pop-head">
                                                <div class="storage-pop-name">{{item.name}}</div>
                                                <div class="storage-pop-count">货架数：{{item.goodscount}}</div>
                                            </div>
                                            <div class="storage-pop-body">
                                                <div class="storage-table">
                                                    <div class="table-title">
                                                        <div class="table-title-item">材料名</div>
                                                        <div class="table-title-item">规格</div>
                                                        <div class="table-title-item">库存数量</div>
                                                    </div>
                                                    <div class="table-content"
                                                        v-infinite-scroll="getSelectStorageMaterialList"
                                                        infinite-scroll-disabled="storageMaterialDisabled">
                                                        <div class="table-data"
                                                            v-for="(item, index) in storageMaterialList" :key="index">
                                                            <div class="table-data-item">
                                                                <el-tooltip class="item" effect="dark"
                                                                    :content="item.materialname" placement="top-end">
                                                                    <span>{{item.materialname}}</span>
                                                                </el-tooltip>
                                                            </div>
                                                            <div class="table-data-item">{{item.specificationname}}
                                                            </div>
                                                            <div class="table-data-item">{{item.count}}{{item.unit}}
                                                            </div>
                                                        </div>
                                                        <p class="table-data-remind" v-if="storageMaterialNoMore">没有更多了
                                                        </p>
                                                        <p class="table-data-remind" v-if="storageMaterialIsLoading">
                                                            加载中...
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="storage-item" slot="reference" style="width: 2.08vw; height: 5vh;"
                                            :style="{top: item.piexly +'px', left: item.pixelx + 'px'}"
                                            v-if="item.type === '1' ">
                                            <img src="../img/storage_1.png" alt="" style="width: 100%; height: 100%;">
                                            <div class="storage-item-name" style="margin-top: 2.2vh;">{{index + 1}}
                                            </div>
                                        </div>

                                        <div class="storage-item" slot="reference"
                                            :style="{top: item.piexly +'px', left: item.pixelx + 'px'}"
                                            style="width: 2.44vw; height: 4.6vh;" v-if="item.type === '2' ">
                                            <img src="../img/storage_2.png" alt="" style="width: 100%; height: 100%;">
                                            <div class="storage-item-name" style="margin-top: .8vh;">{{index + 1}}
                                            </div>
                                        </div>

                                        <div class="storage-item" slot="reference"
                                            :style="{top: item.piexly +'px', left: item.pixelx + 'px'}"
                                            style="width: 1.71vw; height: 4.9vh;" v-if="item.type === '3' ">
                                            <img src="../img/storage_3.png" alt="" style="width: 100%; height: 100%;">
                                            <div class="storage-item-name">{{index + 1}}
                                            </div>
                                        </div>
                                    </el-popover>

                                    <!-- <div class="storage-item" slot="reference" v-for="(item, index) in allStorageList"
                                        :key="index" :style="{top: item.piexly +'px', left: item.pixelx + 'px'}">
                                        <img src="../img/storage_1.png" alt="" style="width: 100%; height: 100%;"> -->

                                    <!-- <div class="pop-arrow"></div>
                                        <div class="pop-container">这是痰喘</div> -->

                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <!--物联网-->
            <transition name="primary-fade">
                <div class="internet-container" v-show="tabIndex === 3">
                    <div class="internet-container-inner">
                        <div class="internet-show-container">
                            <div class="internet-operate-list">
                                <div class="internet-operate-item" v-for="item in internetTabList"
                                    @click="changeInterTabIdx(item.idx)"
                                    :class="[interTabIndex === item.idx ? 'active' : '']" :key="item.idx">
                                    <span class="iconfont internet-operate-item-icon" :class="item.icon"></span>
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                            <!--监控设备-->
                            <transition name="inter-fade">
                                <div class="internet-monitor-container" v-if="interTabIndex === 0">
                                    <div class="internet-monitor-tool">
                                        <div class="internet-monitor-btn">视频点位</div>
                                        <div class="internet-monitor-btn">广播</div>
                                    </div>
                                    <div class="internet-monitor-list">
                                        <div class="internet-monitor-video" v-for="(item, index) in interMonitorList"
                                            :key="index">
                                            <div class="video-position" :id="'fullvideo' + index"
                                                style="width:100%; height:100%;margin:0;"></div>
                                        </div>
                                    </div>

                                </div>
                            </transition>

                            <!--进场车辆-->
                            <transition name="inter-fade">
                                <div class="internet-enter-car-container" v-if="interTabIndex === 1">
                                    <div class="inter-select-container">
                                        <div style="margin-right: 10px;">起止时间</div>
                                        <el-date-picker v-model="interEnterCarDate" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            size="small" @change="interEnterCarDateChange">
                                        </el-date-picker>
                                        <el-radio-group v-model="interEnterCarState" size="medium"
                                            style="margin-left: 30px;" @change="interEnterCarStateChange">
                                            <el-radio :label="item.value"
                                                v-for="(item, index) in interEnterCarStateList" :key="index">
                                                {{item.name}}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div class="inter-enter-car-list">
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-top">
                                                    <span>浙A-98000</span>
                                                    <span>未关联进场</span>
                                                </div>
                                                <div class="item-desc-bottom">2020-10-10 10:10:09</div>
                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-top">
                                                    <span>浙A-98000</span>
                                                    <span>未关联进场</span>
                                                </div>
                                                <div class="item-desc-bottom">2020-10-10 10:10:09</div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="inter-select-page">
                                        <el-pagination @size-change="interEnterCarSizeChange"
                                            @current-change="interEnterCarCurIndexChange"
                                            :current-page="interEnterCarPageIndex" :page-sizes="[20, 40, 60, 80]"
                                            :page-size="interEnterCarPageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="interEnterCarTotal">
                                        </el-pagination>
                                    </div>
                                </div>
                            </transition>


                            <!--智能地磅-->
                            <transition name="inter-fade">
                                <div class="internet-enter-car-container" v-if="interTabIndex === 2">
                                    <div class="inter-select-container">
                                        <div style="margin-right: 10px;">起止时间</div>
                                        <el-date-picker v-model="interWeighBridgeDate" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            size="small" @change="interWeighBridgeDateChange">
                                        </el-date-picker>
                                        <el-radio-group v-model="interWeighBridgeState" size="medium"
                                            style="margin-left: 30px;" @change="interWeighBridgeStateChange">
                                            <el-radio :label="item.value"
                                                v-for="(item, index) in interEnterCarStateList" :key="index">
                                                {{item.name}}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div class="inter-weighbridge-list">
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="inter-enter-car-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-weighbridge-item-time">2021-02-10</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row">
                                                    <span>混凝土C50</span>
                                                    <span>100吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>10:00:00</span>
                                                    <span>进10吨</span>
                                                </div>
                                                <div class="item-desc-row item-desc-row-content">
                                                    <span>18:08:00</span>
                                                    <span>出10吨</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="inter-select-page">
                                        <el-pagination @size-change="interWeighBridgeSizeChange"
                                            @current-change="interWeighBridgeCurIndexChange"
                                            :current-page="interWeighBridgePageIndex" :page-sizes="[20, 40, 60, 80]"
                                            :page-size="interWeighBridgePageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="interWeighBridgeTotal">
                                        </el-pagination>
                                    </div>
                                </div>
                            </transition>

                            <!--行为识别-->
                            <transition name="inter-fade">
                                <div class="internet-enter-car-container" v-if="interTabIndex === 3">
                                    <div class="inter-select-container">
                                        <div style="margin-right: 10px;">起止时间</div>
                                        <el-date-picker v-model="interBehaviorDate" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            size="small" @change="interBehaviorDateChange">
                                        </el-date-picker>
                                        <el-radio-group v-model="interBehaviorState" size="medium"
                                            style="margin-left: 30px;" @change="interBehaviorStateChange">
                                            <el-radio :label="item.value"
                                                v-for="(item, index) in interEnterCarStateList" :key="index">
                                                {{item.name}}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div class="inter-behavior-list">
                                        <div class="inter-behavior-item">
                                            <div class="item-img">
                                                <el-image style="width: 100%; height: 100%" src="" fit="none">
                                                    <div slot="placeholder" class="item-img-slot">
                                                        加载中<span class="dot">...</span>
                                                    </div>
                                                    <div slot="error" class="item-img-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                            </div>
                                            <div class="item-desc">
                                                <div class="item-desc-row" style="color: #333333;">吊车司机不匹配</div>
                                                <div class="item-desc-row" style="color: #666666;">2021-10-10 21:04:23
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="inter-select-page">
                                        <el-pagination @size-change="interBehaviorSizeChange"
                                            @current-change="interBehaviorCurIndexChange"
                                            :current-page="interBehaviorPageIndex" :page-sizes="[20, 40, 60, 80]"
                                            :page-size="interBehaviorPageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="interEnterCarTotal">
                                        </el-pagination>
                                    </div>
                                </div>
                            </transition>

                            <!--实名制-->
                            <transition name="inter-fade">
                                <div class="internet-real-name-container" v-if="interTabIndex === 6">
                                    <div class="real-name-number">
                                        <div class="real-name-number-item">
                                            <div class="item-count">
                                                <count-to :start-val='0' :end-val='1323' :duration=2000></count-to>
                                                <span>人</span>
                                            </div>
                                            <div class="item-desc first">实名登记人数</div>
                                        </div>
                                        <div class="real-name-number-item">
                                            <div class="item-count">
                                                <count-to :start-val='0' :end-val='3323' :duration=2000></count-to>
                                                <span>人</span>
                                            </div>
                                            <div class="item-desc second">在职人数</div>
                                        </div>
                                        <div class="real-name-number-item">
                                            <div class="item-count">
                                                <count-to :start-val='0' :end-val='998' :duration=2000></count-to>
                                                <span>人</span>
                                            </div>
                                            <div class="item-desc third">今日考勤人数</div>
                                        </div>
                                        <div class="real-name-number-item">
                                            <div class="item-count">
                                                <count-to :start-val='0' :end-val='755' :duration=2000></count-to>
                                                <span>人</span>
                                            </div>
                                            <div class="item-desc forth">在岗人数</div>
                                        </div>
                                    </div>
                                    <div class="real-name-chart">
                                        <div class="real-name-chart-inner">
                                            <div class="real-name-chart-container">
                                                <div id="lineChart" style="width: 29.16vw; height: 34vh;"></div>
                                            </div>
                                            <div class="real-name-chart-container">
                                                <div id="barChart" style="width: 29.16vw; height: 34vh;"></div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </transition>

                            <!--扬尘设备-->
                            <transition name="inter-fade">
                                <div class="internet-raise-container" v-if="interTabIndex === 5">
                                    <div class="internet-raise-container-inner">
                                        <div class="raise-chart-list">
                                            <div class="raise-chart-item">
                                                <div class="raise-chart-item-chart">
                                                    <div id="gaugeChart1"
                                                        style="width: 22.97vw; height: 22vh; margin: 0 auto;">
                                                    </div>
                                                </div>
                                                <div class="raise-chart-item-name">PM2.5</div>
                                            </div>
                                            <div class="raise-chart-item">
                                                <div class="raise-chart-item-chart">
                                                    <div id="gaugeChart2"
                                                        style="width: 22.97vw; height: 22vh; margin: 0 auto;">
                                                    </div>
                                                </div>
                                                <div class="raise-chart-item-name">PM10</div>
                                            </div>

                                        </div>

                                        <div class="raise-value-list">
                                            <div class="raise-value-double">
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='36' :duration=2000>
                                                        </count-to>
                                                        <span>m/s</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #F58D76;">风速
                                                    </div>
                                                </div>
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='32' :duration=2000>
                                                        </count-to>
                                                        <span>℃</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #65C6C4;">温度
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="raise-value-double">
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='87.6' :duration=2000>
                                                        </count-to>
                                                        <span>%</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #65C6C4;">湿度
                                                    </div>
                                                </div>
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <span>北风</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #6FBAE8;">风向
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="raise-value-list">
                                            <div class="raise-value-double">
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='3323' :duration=2000>
                                                        </count-to>
                                                        <span>Pa</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #AEA1EA;">
                                                        大气压
                                                    </div>
                                                </div>
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='66.2' :duration=2000>
                                                        </count-to>
                                                        <span>dB</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #FF9C9C;">噪音
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="raise-value-double">
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='3' :duration=2000></count-to>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #ABCD89;">风力
                                                    </div>
                                                </div>
                                                <div class="raise-value-single">
                                                    <div class="raise-value-count">
                                                        <count-to :start-val='0' :end-val='99.87' :duration=2000>
                                                        </count-to>
                                                        <span>mg/m³</span>
                                                    </div>
                                                    <div class="raise-value-title" style="background-color: #FFB677;">
                                                        总漂浮颗粒物
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </transition>

                            <!--语音广播-->
                            <transition name="inter-fade">
                                <div class="internet-broadcast-container" v-if="interTabIndex === 7">
                                    <div class="internet-broadcast-tab">
                                        <div class="internet-broadcast-tab-item"
                                            :class="[broadcastTabIndex === 0 ? 'active' : '']"
                                            @click="changeBroadcastTabIndex(0)">基本信息</div>
                                        <div class="internet-broadcast-tab-item"
                                            :class="[broadcastTabIndex === 1 ? 'active' : '']"
                                            @click="changeBroadcastTabIndex(1)">选择接受广播的终端</div>
                                        <div class="internet-broadcast-tab-remain"></div>
                                    </div>
                                    <div class="internet-broadcast-show">
                                        <!--语音广播 基本信息-->
                                        <div class="internet-broadcast-base" v-if="broadcastTabIndex === 0">
                                            <div class="base-item">
                                                <div class="base-item-key required">常用语选择</div>
                                                <el-select placeholder="请选择" size="small" style="width: 520px;">
                                                    <el-option label="选项1" value="121">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                            <div class="base-item">
                                                <div class="base-item-key required">标题</div>
                                                <el-input placeholder="请输入内容" size="small" style="width: 520px;">
                                                </el-input>
                                            </div>

                                            <div class="base-item broadcast-content">
                                                <div class="base-item-key required">内容</div>
                                                <el-input type="textarea" style="width: 520px;"></el-input>
                                            </div>
                                            <div class="base-item-operate-list">
                                                <el-button type="primary" size="small">点击试听</el-button>
                                                <el-button type="primary" size="small">高级选项</el-button>
                                            </div>

                                            <div class="base-item">
                                                <div class="base-item-key">播放次数</div>
                                                <el-input-number controls-position="right" :min="1" :max="10"
                                                    size="small" style="width: 120px;"></el-input-number>
                                                <div
                                                    style="margin-left: 30px; margin-right: 10px; height: 32px; line-height: 32px;">
                                                    紧急程度</div>
                                                <el-radio-group>
                                                    <el-radio :label="3">普通</el-radio>
                                                    <el-radio :label="6">加急</el-radio>
                                                </el-radio-group>
                                            </div>

                                            <div class="base-item broadcast-content">
                                                <div class="base-item-key required">备注信息</div>
                                                <el-input type="textarea" style="width: 520px;"></el-input>
                                            </div>

                                            <div class="base-btn-list">
                                                <el-button size="small" style="width: 120px;">取消</el-button>
                                                <el-button type="primary" size="small"
                                                    style="margin-left: 120px; width: 120px;">提交
                                                </el-button>
                                            </div>


                                        </div>

                                        <!--语音广播 选择接收广播的终端-->
                                        <div class="internet-broadcast-select" v-if="broadcastTabIndex === 1">
                                            <div class="base-item base-item-select">
                                                <div class="base-item-key required">常用语选择</div>
                                                <el-select placeholder="请选择" size="small" style="width: 520px;">
                                                    <el-option label="选项1" value="121">
                                                    </el-option>
                                                </el-select>
                                            </div>

                                            <el-table :data="broadcastList" style="width: 100%" :border="true"
                                                :stripe="true" @selection-change="handleBroadCastSelectionChange"
                                                ref="multipleTable">
                                                <el-table-column label="全选" width="150" align="center">
                                                    <el-table-column type="selection" width="55" align="center">
                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="序号" width="150" align="center">
                                                    <el-table-column prop="date" label="检索" width="150" align="center">
                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="终端名称" width="150" align="center" sortable>
                                                    <el-table-column prop="name" width="150" align="center"
                                                        show-overflow-tooltip>
                                                        <template slot="header" slot-scope="scope">
                                                            <el-input size="mini" placeholder="输入关键字搜索" />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="安装类型" width="150" align="center" sortable>
                                                    <el-table-column prop="date" width="150" align="center"
                                                        show-overflow-tooltip>
                                                        <template slot="header" slot-scope="scope">
                                                            <el-input size="mini" placeholder="输入关键字搜索" />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="施工单位" width="150" align="center" sortable>
                                                    <el-table-column prop="date" width="150" align="center"
                                                        show-overflow-tooltip>
                                                        <template slot="header" slot-scope="scope">
                                                            <el-input size="mini" placeholder="输入关键字搜索" />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="工程名称" width="150" align="center" sortable>
                                                    <el-table-column prop="date" width="150" align="center"
                                                        show-overflow-tooltip>
                                                        <template slot="header" slot-scope="scope">
                                                            <el-input size="mini" placeholder="输入关键字搜索" />
                                                        </template>

                                                    </el-table-column>
                                                </el-table-column>
                                                <el-table-column label="省市县/区街道" align="center" sortable>
                                                    <el-table-column prop="date" align="center" show-overflow-tooltip>
                                                        <template slot="header" slot-scope="scope">
                                                            <el-input size="mini" placeholder="输入关键字搜索" />
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>
                                            </el-table>

                                            <div class="inter-select-page">
                                                <el-pagination @size-change="interBroadCastSizeChange"
                                                    @current-change="interBroadCastCurIndexChange"
                                                    :current-page="interBroadCastPageIndex"
                                                    :page-sizes="[20, 40, 60, 80]" :page-size="interBroadCastPageSize"
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :total="interBroadCastTotal">
                                                </el-pagination>
                                            </div>

                                            <div class="internet-broadcast-select-btn">
                                                <el-button size="small" style="width: 120px;">取消</el-button>
                                                <el-button type="primary" size="small"
                                                    style="margin-left: 120px; width: 120px;">提交
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </transition>

                            <!--起重机械-->
                            <transition name="inter-fade">
                                <div class="internet-machine-container" v-if="interTabIndex === 4">
                                    <div class="internet-machine-container-inner">
                                        <el-carousel height="45.9vh" :autoplay="false" indicator-position="none"
                                            arrow="always">
                                            <el-carousel-item v-for="item in 1" :key="item">
                                                <div class="internet-machine-1">
                                                    <div class="internet-machine-1-img">
                                                        <!-- <img src="../img/internet_machine_1.png" alt=""
                                                            style="width: 28.64vw; height: 48.2vh;"> -->
                                                        <img src="../img/internet_machine_2.png" alt=""
                                                            style="width: 19.22vw; height: 47.6vh;">
                                                    </div>
                                                    <div class="internet-machine-1-left">
                                                        <div class="internet-machine-desc">
                                                            <div class="internet-machine-desc-item">
                                                                <span>序列：</span>
                                                                <span>3/8(塔吊)</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>产权号：</span>
                                                                <span>浙JL-T00287</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>安装日期：</span>
                                                                <span>2020/01/04</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="internet-machine-1-right">
                                                        <div class="internet-machine-desc">
                                                            <div class="internet-machine-desc-item">
                                                                <span>高度：</span>
                                                                <span style="color: #30C776;">0m</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>起重：</span>
                                                                <span style="color: #30C776;">0t</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>风速：</span>
                                                                <span style="color: #30C776;">0m/s</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>倾角：</span>
                                                                <span style="color: #30C776;">0</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>重量百分：</span>
                                                                <span style="color: #30C776;">0%</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>力矩百分：</span>
                                                                <span style="color: #30C776;">0%</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>幅度：</span>
                                                                <span style="color: #30C776;">0</span>
                                                            </div>
                                                            <div class="internet-machine-desc-item">
                                                                <span>回旋：</span>
                                                                <span style="color: #30C776;">0</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                </div>
                            </transition>
                        </div>
                    </div>
                    <div class="btn-list">
                        <div class="btn-head">
                            <div class="btn-head-title">
                                <img src="../img/data_board_icon.png" alt="" style="width:18px; height: 18px;">
                                <span style="margin-left: 10px;">运营快捷入口</span>
                            </div>
                        </div>
                        <div class="btn-container">
                            <div class="btn-container-inner">
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(1)">
                                        <img src="../img/entry_sgzjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">总施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(2)">
                                        <img src="../img/entry_jdsgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">阶段施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(3)">
                                        <img src="../img//entry_clcgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料采购计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(4)">
                                        <img src="../img/entry_cgdd.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">采购订单</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(5)">
                                        <img src="../img/entry_cljc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料进场</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(6)">
                                        <img src="../img/entry_clly.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料领用</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(7)">
                                        <img src="../img/entry_clkc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料库存</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <!--风险管控-->
            <transition name="primary-fade">
                <div class="risk-manage-container" v-show="tabIndex === 2">
                    <div class="risk-manage-container-inner">
                        <div class="risk-manage-show-container">
                            <!-- <iframe src="./riskManage.html" frameborder="0" width="100%" height="100%"></iframe> -->
                            <div class="risk-container">
                                <div class="risk-manage-tab">
                                    <div class="risk-manage-tab-item" v-for="item in riskManageTabList" :key="item.idx"
                                        :class="[riskManageTabIndex === item.idx ? 'active' : '']"
                                        @click="changeRiskManageTabIndex(item.idx)">{{item.name}}</div>
                                </div>
                                <div class="risk-manage-content">
                                    <!--风险管控/物联网-->
                                    <div class="risk-inter-container" v-if="riskManageTabIndex === 2">
                                        <div class="risk-inter-menu">
                                            <div class="risk-inter-menu-item" v-for="item in riskInterMenuList"
                                                :key="item.idx"
                                                :class="[riskInterMenuIndex === item.idx ? 'active' : '']"
                                                @click="changeRiskInterMenuIndex(item.idx)">
                                                <span class="iconfont risk-inter-menu-item-icon"
                                                    :class="item.icon"></span>
                                                <span>{{item.name}}</span>
                                            </div>
                                        </div>
                                        <div class="risk-inter-content">
                                            <!--风险管控-物联网-吊塔-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-tower" v-if="riskInterMenuIndex === 1">
                                                    <div class="risk-inter-condition">
                                                        <div
                                                            class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-height">
                                                            违规选择</div>
                                                        <el-select v-model="riskInterTowerFilterValue" clearable
                                                            placeholder="请选择" size="small"
                                                            class="risk-inter-condition-element">
                                                            <el-option v-for="item in 4" label="1" value="">
                                                            </el-option>
                                                        </el-select>
                                                        <div
                                                            class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-left risk-inter-condition-element-height">
                                                            起止时间</div>
                                                        <el-date-picker v-model="riskInterTowerSelectDate"
                                                            type="datetimerange" range-separator="至"
                                                            start-placeholder="开始日期" end-placeholder="结束日期" size="small"
                                                            class="risk-inter-condition-element">
                                                        </el-date-picker>
                                                        <div
                                                            class="risk-inter-condition-element risk-inter-condition-element-right risk-inter-condition-element-left risk-inter-condition-element-height">
                                                            塔吊序号</div>
                                                        <div class="tower-number-item">
                                                            <div class="tower-number-item-dot"></div>
                                                            <div>几号塔吊</div>
                                                        </div>
                                                        <div class="tower-number-item">
                                                            <div class="tower-number-item-dot"></div>
                                                            <div>几号塔吊</div>
                                                        </div>
                                                        <div class="tower-number-item">
                                                            <div class="tower-number-item-dot"></div>
                                                            <div>几号塔吊</div>
                                                        </div>
                                                        <div class="tower-number-item">
                                                            <div class="tower-number-item-dot"></div>
                                                            <div>几号塔吊</div>
                                                        </div>
                                                    </div>

                                                    <div class="risk-inter-table">
                                                        <el-table :data="riskInterTowerList" stripe style="width: 100%"
                                                            border height="100%">
                                                            <el-table-column prop="date" label="项目名称" width="180">
                                                            </el-table-column>
                                                            <el-table-column prop="name" label="设备编号" width="180">
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="传感器编号"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="传感器名称"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="传感器序号"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="当前时间"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="传感器数值"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="最大阀值"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                            <el-table-column prop="address" label="最小阈值"
                                                                show-overflow-tooltip>
                                                            </el-table-column>
                                                        </el-table>
                                                    </div>

                                                    <div class="risk-inter-page">
                                                        <el-pagination @size-change="riskInterTowerPageSizeChange"
                                                            @current-change="riskInterTowerPageIndexChange"
                                                            :current-page="riskInterTowerPageIndex"
                                                            :page-sizes="[20, 40, 60, 80]"
                                                            :page-size="riskInterTowerPageSize"
                                                            layout="total, sizes, prev, pager, next, jumper"
                                                            :total="riskInterTowerTotal">
                                                        </el-pagination>
                                                    </div>
                                                </div>
                                            </transition>

                                            <!--风险管控-物联网-行为识别-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-behavior" v-if="riskInterMenuIndex === 0">
                                                    <div class="inter-select-container">
                                                        <div style="margin-right: 10px;">起止时间</div>
                                                        <el-date-picker v-model="riskInterBehaviorDate"
                                                            type="datetimerange" range-separator="至"
                                                            start-placeholder="开始日期" end-placeholder="结束日期" size="small"
                                                            @change="riskInterBehaviorDateChange">
                                                        </el-date-picker>
                                                        <el-radio-group v-model="riskInterBehaviorState" size="medium"
                                                            style="margin-left: 30px;"
                                                            @change="riskInterBehaviorStateChange">
                                                            <el-radio :label="item.value"
                                                                v-for="(item, index) in interEnterCarStateList"
                                                                :key="index">
                                                                {{item.name}}</el-radio>
                                                        </el-radio-group>
                                                    </div>
                                                    <div class="inter-behavior-list">
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="inter-select-page">
                                                        <el-pagination @size-change="riskInterBehaviorSizeChange"
                                                            @current-change="riskInterBehaviorCurIndexChange"
                                                            :current-page="riskInterBehaviorPageIndex"
                                                            :page-sizes="[20, 40, 60, 80]"
                                                            :page-size="riskInterBehaviorPageSize"
                                                            layout="total, sizes, prev, pager, next, jumper"
                                                            :total="riskInterBehaviorTotal">
                                                        </el-pagination>
                                                    </div>
                                                </div>
                                            </transition>
                                            <!--风险管控-物联网-升降机-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-lift" v-if="riskInterMenuIndex === 2">升降机</div>
                                            </transition>
                                            <!--风险管控 物联网 安全帽-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-safety" v-if="riskInterMenuIndex === 3">
                                                    <div class="inter-select-container">
                                                        <div style="margin-right: 10px;">起止时间</div>
                                                        <el-date-picker v-model="riskInterBehaviorDate"
                                                            type="datetimerange" range-separator="至"
                                                            start-placeholder="开始日期" end-placeholder="结束日期" size="small"
                                                            @change="riskInterBehaviorDateChange">
                                                        </el-date-picker>
                                                        <el-radio-group v-model="riskInterBehaviorState" size="medium"
                                                            style="margin-left: 30px;"
                                                            @change="riskInterBehaviorStateChange">
                                                            <el-radio :label="item.value"
                                                                v-for="(item, index) in interEnterCarStateList"
                                                                :key="index">
                                                                {{item.name}}</el-radio>
                                                        </el-radio-group>
                                                    </div>
                                                    <div class="inter-behavior-list">
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="inter-select-page">
                                                        <el-pagination @size-change="riskInterBehaviorSizeChange"
                                                            @current-change="riskInterBehaviorCurIndexChange"
                                                            :current-page="riskInterBehaviorPageIndex"
                                                            :page-sizes="[20, 40, 60, 80]"
                                                            :page-size="riskInterBehaviorPageSize"
                                                            layout="total, sizes, prev, pager, next, jumper"
                                                            :total="riskInterBehaviorTotal">
                                                        </el-pagination>
                                                    </div>
                                                </div>
                                            </transition>
                                            <!--风险管控 物联网 扬尘设备-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-raise" v-if="riskInterMenuIndex === 4">
                                                    扬尘设备
                                                </div>
                                            </transition>

                                            <!--风险管控 物联网 临边监测-->
                                            <transition name="risk-inter-slide">
                                                <div class="risk-inter-supervise" v-if="riskInterMenuIndex === 5">
                                                    <div class="inter-select-container">
                                                        <div style="margin-right: 10px;">起止时间</div>
                                                        <el-date-picker v-model="riskInterBehaviorDate"
                                                            type="datetimerange" range-separator="至"
                                                            start-placeholder="开始日期" end-placeholder="结束日期" size="small"
                                                            @change="riskInterBehaviorDateChange">
                                                        </el-date-picker>
                                                        <el-radio-group v-model="riskInterBehaviorState" size="medium"
                                                            style="margin-left: 30px;"
                                                            @change="riskInterBehaviorStateChange">
                                                            <el-radio :label="item.value"
                                                                v-for="(item, index) in interEnterCarStateList"
                                                                :key="index">
                                                                {{item.name}}</el-radio>
                                                        </el-radio-group>
                                                    </div>
                                                    <div class="inter-behavior-list">
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                        <div class="inter-behavior-item">
                                                            <div class="item-img">
                                                                <el-image style="width: 100%; height: 100%" src=""
                                                                    fit="none">
                                                                    <div slot="placeholder" class="item-img-slot">
                                                                        加载中<span class="dot">...</span>
                                                                    </div>
                                                                    <div slot="error" class="item-img-slot">
                                                                        <i class="el-icon-picture-outline"></i>
                                                                    </div>
                                                                </el-image>
                                                                <div class="inter-behavior-item-res">识别结果：张三三</div>
                                                            </div>
                                                            <div class="item-desc">
                                                                <div class="item-desc-row" style="color: #333333;">
                                                                    吊车司机不匹配
                                                                </div>
                                                                <div class="item-desc-row" style="color: #666666;">
                                                                    2021-10-10
                                                                    21:04:23</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="inter-select-page">
                                                        <el-pagination @size-change="riskInterBehaviorSizeChange"
                                                            @current-change="riskInterBehaviorCurIndexChange"
                                                            :current-page="riskInterBehaviorPageIndex"
                                                            :page-sizes="[20, 40, 60, 80]"
                                                            :page-size="riskInterBehaviorPageSize"
                                                            layout="total, sizes, prev, pager, next, jumper"
                                                            :total="riskInterBehaviorTotal">
                                                        </el-pagination>
                                                    </div>
                                                </div>
                                            </transition>
                                        </div>


                                    </div>
                                    <!--风险管控 质量安全-->
                                    <div class="risk-inter-container" v-if="riskManageTabIndex === 1">
                                        <!-- <div class="test-head">
                                            <div class="test-head-item" v-for="(item, index) in testArray" :key="index">
                                                {{item.length}}</div>
                                        </div>
                                        <div class="test-body">
                                            <div class="test-body-item" v-for="(item, index) in testArray" :key="index">
                                                <div class="test-body-item-obj" v-for="(arrItem, idx) in item"
                                                    :key="idx">arrItem</div>
                                            </div>
                                        </div>

                                        <div class="test-footer">
                                            <div class="test-footer-item" v-for="(item, index) in testArray"
                                                :key="index">
                                                <div class="test-footer-item-obj" v-for="(arrItem, idx) in item"
                                                    :key="idx">arrItem</div>
                                            </div>
                                        </div> -->
                                        <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree"
                                            highlight-current :props="defaultProps" @node-click="handleNodeClick" node-key="id">
                                        </el-tree>
                                        <el-button @click="confirmResult">确定</el-button>
                                        <el-button @click="resetResult">清空</el-button>


                                    </div>

                                    <!--风险管控 材料超差-->

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-list">
                        <div class="btn-head">
                            <div class="btn-head-title">
                                <img src="../img/data_board_icon.png" alt="" style="width:18px; height: 18px;">
                                <span style="margin-left: 10px;">运营快捷入口</span>
                            </div>
                        </div>
                        <div class="btn-container">
                            <div class="btn-container-inner">
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(1)">
                                        <img src="../img/entry_sgzjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">总施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(2)">
                                        <img src="../img/entry_jdsgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">阶段施工计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(3)">
                                        <img src="../img//entry_clcgjh.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料采购计划</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(4)">
                                        <img src="../img/entry_cgdd.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">采购订单</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(5)">
                                        <img src="../img/entry_cljc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料进场</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(6)">
                                        <img src="../img/entry_clly.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料领用</div>
                                    </div>
                                </div>
                                <div class="btn-item">
                                    <div class="btn-item-inner" @click="entryOperate(7)">
                                        <img src="../img/entry_clkc.png" alt="" class="btn-item-img">
                                        <div class="btn-item-text">材料库存</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>


    <script src="../js/ckplayer/ckplayer.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/public.js?1234"></script>
    <script src="./chartConfig.js?t=0517"></script>

    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    // tab展示index
                    tabIndex: 2,
                    // 当前项目的projectId
                    projectId: "",
                    // 楼层状态 0未施工 1进行中 2已完成
                    statusList: [{
                        type: 2,
                        name: "已完成",
                        color: "#68D99D"
                    }, {
                        type: 1,
                        name: "进行中",
                        color: "#FFBA52"
                    }, {
                        type: 0,
                        name: "未开始",
                        color: "#C9C9C9"
                    }],
                    // 所有主体的进度列表
                    allProgressList: [],
                    // 主体列表
                    mainList: [],
                    // 当前主体列表索引
                    mainIndex: 0,
                    // 当前选中的主体的进度列表
                    curProgressList: [],
                    // 当前主体的所有工序列表
                    processList: [],
                    // 当前楼层下当前工序下的子工序
                    curProcessChildrenList: [],
                    referChildrenList: [],
                    // 当前选中的需要更新的子工序的列表
                    curSelectChildList: [],
                    // 待办事项是否继续请求
                    todoIsLoading: false,
                    todoNoMore: false,
                    // 待办事项 分页
                    todoPageIndex: 1,
                    todoPageSize: 8,
                    todoTaskList: [],
                    todoTaskTotal: 0,
                    // 仓库图片信息
                    storageImgData: {
                        id: "",
                        name: "",
                        url: ""
                    },
                    allStorageList: [],
                    materialIdList: [],
                    materialUseStatusList: [],
                    isShow: true,
                    // 查看单个仓库下的材料信息
                    storageMaterialIndex: 1,
                    storageMaterialSize: 5,
                    curStorageId: "",
                    storageMaterialList: [],
                    storageMaterialIsLoading: false,
                    storageMaterialNoMore: false,
                    isAppShow: false,
                    // 物联网
                    internetTabList: [{
                        name: "监控设备",
                        icon: "iconjiankongshebei",
                        idx: 0
                    }, {
                        name: "进场车辆",
                        icon: "iconjinchang1",
                        idx: 1
                    }, {
                        name: "智能地磅",
                        icon: "icondibang",
                        idx: 2
                    }, {
                        name: "行为识别",
                        icon: "iconhangweishibie",
                        idx: 3
                    }, {
                        name: "起重机械",
                        icon: "iconqizhongjiqizhonggongjushigonggongjuche",
                        idx: 4
                    }, {
                        name: "扬尘设备",
                        icon: "icon208yangchenshebei2",
                        idx: 5
                    }, {
                        name: "实名制",
                        icon: "iconshimingzhi",
                        idx: 6
                    }, {
                        name: "语音广播",
                        icon: "iconyuyinguangbo",
                        idx: 7
                    }],
                    // 物联网tab索引
                    interTabIndex: "",
                    interEnterCarDate: "",
                    interEnterCarState: 0,
                    interEnterCarStateList: [{
                        name: "查看全部",
                        value: 0
                    }, {
                        name: "已关联",
                        value: 1
                    }, {
                        name: "未关联",
                        value: 2
                    }],
                    // 监控设备
                    interMonitorList: [1, 2],
                    // 进场车辆
                    interEnterCarPageIndex: 1,
                    interEnterCarPageSize: 20,
                    interEnterCarTotal: 30,
                    // 智能地磅
                    interWeighBridgeDate: "",
                    interWeighBridgeState: 0,
                    interWeighBridgePageIndex: 1,
                    interWeighBridgePageSize: 20,
                    interWeighBridgeTotal: 30,
                    // 物联网 行为识别
                    interBehaviorDate: "",
                    interBehaviorState: 0,
                    interBehaviorPageIndex: 1,
                    interBehaviorPageSize: 20,
                    interBehaviorTotal: 50,
                    // 语音广播
                    broadcastTabIndex: 0,
                    broadcastList: [],
                    interBroadCastPageIndex: 1,
                    interBroadCastPageSize: 20,
                    interBroadCastTotal: 88,

                    // 风险管控tab列表
                    riskManageTabList: [{
                        name: "材料超差",
                        idx: 0
                    }, {
                        name: "质量安全",
                        idx: 1
                    }, {
                        name: "物联网",
                        idx: 2
                    }],
                    riskManageTabIndex: 2,
                    // 风险管控物联网菜单
                    riskInterMenuList: [{
                        name: "行为识别",
                        icon: "iconzu41563",
                        idx: 0
                    }, {
                        name: "吊塔",
                        icon: "iconICON-tadiaojiance",
                        idx: 1
                    }, {
                        name: "升降机",
                        icon: "iconshengjiangji1",
                        idx: 2
                    }, {
                        name: "安全帽",
                        icon: "iconzu41563",
                        idx: 3
                    }, {
                        name: "扬尘设备",
                        icon: "icon208yangchenshebei2",
                        idx: 4
                    }, {
                        name: "临边监测",
                        icon: "iconjiance",
                        idx: 5
                    }],
                    riskInterMenuIndex: 0,
                    // 风险管控 物联网 塔吊
                    riskInterTowerPageIndex: 0,
                    riskInterTowerPageSize: 20,
                    riskInterTowerTotal: 90,
                    riskInterTowerFilterValue: "",
                    riskInterTowerSelectDate: "",
                    riskInterTowerList: [],
                    // 风险管控 物联网 行为识别
                    riskInterBehaviorDate: "",
                    riskInterBehaviorState: 0,
                    riskInterBehaviorPageIndex: 1,
                    riskInterBehaviorPageSize: 20,
                    riskInterBehaviorTotal: 123,

                    gaugeChart1: "",
                    gaugeChart2: "",
                    barChart: "",
                    lineChart: "",

                    testArray: [
                        [1, 2],
                        [1, 2, 3, 4, 5, 6],
                        [1, 2, 3],
                        [1]
                    ],

                    data: [{
                        id: 1,
                        label: '一级 1',
                        children: [{
                            id: 4,
                            label: '二级 1-1',
                            children: [{
                                id: 9,
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    }, {
                        id: 2,
                        label: '一级 2',
                        children: [{
                            id: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            label: '二级 2-2'
                        }]
                    }, {
                        id: 3,
                        label: '一级 3',
                        children: [{
                            id: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            label: '二级 3-2'
                        }]
                    }],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }

                };
            },
            mounted: function () {
                this.isAppShow = true;
                this.projectId = getQuerys('projectId');
                // 工作台请求
                // this.getProgressList();
                // 初始化
                this.initWithTabIndex(this.tabIndex);
                // 第一次获取待办事项
                this.getTodoTaskList();
                // 原材料统计 需要projectId 获取图片再获取仓库列表
                // this.getStorageBgImg();
                // 获取材料的使用情况
                // this.getMaterialUseStatusList();
            },

            computed: {
                todoDisabled() {
                    return this.todoIsLoading || this.todoNoMore
                },
                // 当前选中仓库下的材料列表
                storageMaterialDisabled() {
                    return this.storageMaterialIsLoading || this.storageMaterialNoMore
                }
            },

            watch: {
                tabIndex(value) {
                    this.initWithTabIndex(value);
                },
                // 物联网 interTabIndex
                // interTabIndex: {
                //     handler: 'initWithInterTabIndex',
                //     immediate: true
                // },
                interTabIndex(value) {
                    this.initWithInterTabIndex(value);
                }
            },

            methods: {
                handleNodeClick(data) {
                    console.log(data);
                },

                confirmResult() {
                    // console.log(this.$refs.tree.getCheckedKeys());
                    // // getHalfCheckedNodes
                    // console.log(this.$refs.tree.getHalfCheckedNodes());
                    // var rad = ''
                    // var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
                    // var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
                    // ridsb.forEach(ids => {//获取选中的所有的父级id
                    //     rad += ',' + ids.pid
                    // })
                    // rad = rad.substr(1) // 删除字符串前面的','
                    // var rids = rad + ',' + ridsa
                    // var arr = rids.split(',')//  把字符串转换成数组
                    // arr = [...new Set(arr)]; // 数组去重
                    // rids = arr.join(',')// 把数组转换成字符串
                    // console.log(rids)
                    console.log(this.$refs.tree.getCheckedNodes(false,true)) // 直接获取每一项的id
                },

                resetResult(){
                    this.$refs.tree.setCheckedNodes([]);
                },

                // 风险管控
                changeRiskManageTabIndex(index) {
                    index = parseInt(index);
                    if (this.riskManageTabIndex === index) {
                        return
                    }
                    this.riskManageTabIndex = index;
                },
                // 风险管控 物联网
                changeRiskInterMenuIndex(index) {
                    index = parseInt(index);
                    if (this.riskInterMenuIndex === index) {
                        return
                    }
                    this.riskInterMenuIndex = index;
                },

                // 风险管控 物联网 塔吊
                riskInterTowerPageIndexChange(val) {
                    console.log(val)
                },

                riskInterTowerPageSizeChange(val) {
                    console.log(val)
                },

                // 风险管控 物联网 行为识别
                riskInterBehaviorDateChange(value) {

                },

                riskInterBehaviorStateChange() {

                },

                riskInterBehaviorSizeChange(val) {
                    this.riskInterBehaviorPageSize = val;
                },

                riskInterBehaviorCurIndexChange() {

                },
                // 物联网
                // 修改物联网tab的index
                changeInterTabIdx(idx) {
                    idx = parseInt(idx);
                    if (idx === this.interTabIndex) {
                        return
                    }
                    this.interTabIndex = idx;
                },
                // 互联网tab初始化
                initWithInterTabIndex(value) {
                    value = value ? parseInt(value) : this.interTabIndex;
                    var self = this;
                    switch (value) {
                        case 0:
                            // 监控设备
                            // 数据请求 并初始化视频
                            this.$nextTick(function () {
                                self.initMonitorAllList();
                            });
                            break;
                        case 1:
                            // 进场车辆
                            break;
                        case 2:
                            // 智能地磅
                            break;
                        case 3:
                            // 行为识别
                            break;
                        case 4:
                            // 起重设备
                            break;
                        case 5:
                            // 物联网 扬尘设备
                            // if (this.gaugeChart1 && this.gaugeChart2) {
                            //     return
                            // }
                            this.$nextTick(function () {
                                self.initRaiseChart();
                            });

                            break;
                        case 6:
                            // 物联网 实名制
                            // if (this.lineChart && this.barChart) {
                            //     return
                            // }
                            this.$nextTick(function () {
                                self.initRealNameChart();
                            });
                            break;
                        case 7:
                            // 物联网 语音广播
                            // 请求数据
                            console.log("请求数据")



                            break;
                        default:
                            break;
                    }
                },

                // 初始化所有监控
                initMonitorAllList() {
                    var baseCommonOption = {
                        variable: "player", //播放函数名称
                        width: "100%",
                        height: "100%",
                        mobileCkControls: true,
                        autoplay: true,
                        live: true,
                    };
                    var list = this.interMonitorList;
                    for (var i = 0; i < list.length; i++) {
                        var monitorItem = list[i];
                        var itemOption = JSON.parse(JSON.stringify(baseCommonOption));
                        itemOption.container = "#fullvideo" + i;
                        itemOption.video = "rtmp://rtmp01open.ys7.com/openlive/51271f3beb7a4ef1820b74ba20d8c329";
                        monitorItem.player = new ckplayer(itemOption);
                    }

                    // var playerOptions = {
                    //     container: "#fullvideo", //容器的ID或className
                    //     variable: "player", //播放函数名称
                    //     width: "100%",
                    //     height: "100%",
                    //     mobileCkControls: true,
                    //     autoplay: true,
                    //     live: true,
                    //     video: "rtmp://rtmp01open.ys7.com/openlive/51271f3beb7a4ef1820b74ba20d8c329", //视频地址-rtmp的地址就可以
                    // };
                },



                initRealNameChart() {
                    // 初始化实名制图标
                    this.lineChart = echarts.init(document.getElementById('lineChart'));
                    this.barChart = echarts.init(document.getElementById('barChart'));
                    var lineChartOption = lineOption;
                    var barChartOption = barOption;
                    // 修改折线图的xAxis下的data ; 修改系列数组series下的第一个对象的data
                    // lineChartOption.xAxis.data = 
                    // lineChartOption.series[0].data = 

                    // 修改柱状图的 xAxis下的 data; 修改系列数组series下的第一个对象的data（进场）
                    // 第二个对象的data（出场）
                    // barChartOption.xAxis.data = 
                    // barChartOption.series[0].data = 
                    // barChartOption.series[1].data = 
                    this.lineChart.setOption(lineChartOption);
                    this.barChart.setOption(barChartOption);
                    window.addEventListener("resize", () => {
                        this.lineChart.resize();
                        this.barChart.resize();
                    });
                },

                initRaiseChart() {
                    this.gaugeChart1 = echarts.init(document.getElementById('gaugeChart1'));
                    this.gaugeChart2 = echarts.init(document.getElementById('gaugeChart2'));
                    var gaugeChartOption1 = gaugeOption1;
                    var gaugeChartOption2 = gaugeOption2;
                    this.gaugeChart1.setOption(gaugeChartOption1);
                    this.gaugeChart2.setOption(gaugeChartOption2);
                    window.addEventListener("resize", () => {
                        this.gaugeChart1.resize();
                        this.gaugeChart2.resize();
                    });
                },

                // 物联网 进场车辆
                interEnterCarSizeChange(val) {

                },

                interEnterCarCurIndexChange(val) {

                },

                interEnterCarDateChange(date) {
                    console.log(date)
                },

                interEnterCarStateChange(value) {
                    console.log(value)
                },

                // 物联网 智能地磅 分页
                interWeighBridgeSizeChange(val) {

                },

                interWeighBridgeCurIndexChange(val) {

                },

                interWeighBridgeDateChange(date) {
                    console.log(date)
                },

                interWeighBridgeStateChange(value) {
                    console.log(value)
                    console.log(this.interWeighBridgeState)
                },

                // 物联网 行为识别 分页
                interBehaviorSizeChange(val) {
                    this.interBehaviorPageSize = val;

                },

                interBehaviorCurIndexChange(val) {

                },

                interBehaviorDateChange(date) {
                    console.log(date)
                },

                interBehaviorStateChange(value) {
                    console.log(value)
                },

                // 物联网 语音广播 分页
                interBroadCastSizeChange(val) {

                },

                interBroadCastCurIndexChange(val) { },

                // 物联网 实名制
                // 初始化图表
                initChart() {
                    // this.lineChart = echarts.init(document.getElementById('lineChart'));
                    // this.barChart = echarts.init(document.getElementById('barChart'));
                    this.gaugeChart1 = echarts.init(document.getElementById('gaugeChart1'));
                    this.gaugeChart2 = echarts.init(document.getElementById('gaugeChart2'));

                    var lineChartOption = lineOption;
                    var barChartOption = barOption;
                    var gaugeChartOption1 = gaugeOption1;
                    var gaugeChartOption2 = gaugeOption2;
                    // gaugeChartOption1.series[0].data[0].value = 
                    // gaugeChartOption2.series[0].data[0].value = 

                    // this.lineChart.setOption(lineChartOption);
                    // this.barChart.setOption(barChartOption);
                    this.gaugeChart1.setOption(gaugeChartOption1);
                    this.gaugeChart2.setOption(gaugeChartOption2);

                    window.addEventListener("resize", () => {
                        this.lineChart.resize();
                        this.barChart.resize();
                        this.gaugeChart1.resize();
                        this.gaugeChart2.resize();
                    });

                },

                // 语音广播
                changeBroadcastTabIndex(index) {
                    index = parseInt(index);
                    var broadcastIdx = this.broadcastTabIndex;
                    if (broadcastIdx === index) {
                        return
                    }
                    this.broadcastTabIndex = index;
                },

                handleBroadCastSelectionChange(val) {
                    this.multipleSelection = val;
                },


                // entryOperate
                entryOperate(idx) {
                    var entryMap = [{
                        idx: 1,
                        name: "施工总计划",
                        url: "/ApsPublic/sgjdjh/sgjhPage.html"
                    }, {
                        idx: 2,
                        name: "施工阶段计划",
                        url: "/WebList/EasyUiIndex?FormDm=GCZL_SGJH&FormStatus=0"
                    }, {
                        idx: 3,
                        name: "材料采购计划",
                        url: "/ApsPublic/cgjh/cgjhList.html"
                    }, {
                        idx: 4,
                        name: "采购订单",
                        url: "/ApsPublic/cgdd/cgddList.html"
                    }, {
                        idx: 5,
                        name: "材料进场",
                        url: "/WebList/LoadEasyUiIndex?FormDm=APS_MaterialApproach&FormStatus=0"
                    }, {
                        idx: 6,
                        name: "材料领用",
                        url: "/WebList/EasyUiIndex?FormDm=APS_MaterialCollect&FormStatus=0"
                    }, {
                        idx: 7,
                        name: "材料库存",
                        url: "/ApsPublic/clkc/clkcList.html"
                    }];
                    var targetPage = entryMap.filter(function (item) {
                        return item.idx === idx;
                    });
                    if (targetPage.length > 0) {
                        layer.open({
                            type: 2,
                            title: targetPage[0].name,
                            shadeClose: true,
                            shade: 0.4,
                            skin: 'popup_layui',
                            area: ['100%', '100%'],
                            content: targetPage[0].url,
                            end: function () { }
                        });
                    }
                },

                // 待办事件处理
                showCheckWorkDialog(taskid) {
                    parent.layer.open({
                        type: 2,
                        title: '',
                        shadeClose: true,
                        shade: 0.5,
                        area: ['95%', '95%'],
                        content: "/workflow/checkwork?taskid=" + taskid + "&DlgId=1&_=" + Math.random(),
                        end: function () { }
                    })
                },

                // 根据当前的tabIndex 进行相应的操作
                initWithTabIndex(value) {
                    var self = this;
                    this.$nextTick(function () {
                        self.initWithTabIndexCase(value);
                    });
                },

                initWithTabIndexCase(value) {
                    switch (value) {
                        case 0:
                            // 工作台
                            if (this.allProgressList.length === 0) {
                                this.getProgressList();
                            }
                            break;
                        case 1:
                            // 原材料统计
                            // if (this.materialUseStatusList.length === 0) {
                            //     // this.getMaterialUseStatusList();
                            //     this.getMaterialIdList();
                            // }
                            // materialIdList
                            if (this.materialIdList.length === 0) {
                                this.getMaterialIdList();
                            }

                            if (this.allStorageList.length === 0) {
                                // 重新获取图纸 加获取仓库列表
                                this.getStorageBgImg();
                            }

                            break;
                        case 3:
                            if (this.interTabIndex) {
                                return
                            }
                            this.interTabIndex = 0;
                            break;
                        default:
                            break
                    }
                },

                getMaterialIdList() {
                    var self = this;
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Material/GetMaterialShowConfigs',
                        data: {},
                        dataType: 'json',
                        success: function (res) {
                            if (res.Success) {
                                self.materialIdList = res.Data;
                                if (!!self.materialIdList) {
                                    self.getMaterialUseStatusList();
                                }
                                // console.log(res)
                            } else {
                                self.showMsg(res.Msg, "warning");
                            }
                        }
                    });
                },

                // 获取原材料统计 特定材料使用情况
                getMaterialUseStatusList() {
                    // /Material/GetMaterialStatisticsResult 
                    // '2','3','16' 默认材料id
                    var self = this;

                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Material/GetMaterialStatisticsResult',
                        data: {
                            materialIdlist: self.materialIdList
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res.success) {
                                self.materialUseStatusList = res.data;
                                // console.log(res)
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });

                },

                // 关闭仓库pop
                clearCurStorageMaterialAllInfo() {
                    this.storageMaterialIndex = 1;
                    this.curStorageId = "";
                    this.storageMaterialList = [];
                    // this.storageMaterialIsLoading = false;
                    // this.storageMaterialNoMore = false;
                },

                // 展示仓库的详细信息
                showStorageDetail(item) {
                    this.curStorageId = item.id;
                    // 第一次获取当前的数据
                    this.storageMaterialIndex = 1;
                    this.storageMaterialList = [];
                    this.storageMaterialIsLoading = false;
                    this.storageMaterialNoMore = false;
                    this.getSelectStorageMaterialList();
                },

                getSelectStorageMaterialList() {
                    var self = this;
                    // xLoading(true);
                    this.storageMaterialIsLoading = true;
                    $.ajax({
                        type: 'post',
                        headers: {},
                        url: baseUrl + '/Material/GetGoodsByStorage',
                        data: {
                            storageId: self.curStorageId,
                            page: self.storageMaterialIndex,
                            pageSize: self.storageMaterialSize
                        },
                        dataType: 'json',
                        success: function (res) {
                            // xLoading(false)
                            self.storageMaterialIsLoading = false;
                            if (res.success) {
                                var total = res.total;
                                if (self.storageMaterialSize * self.storageMaterialIndex >= total) {
                                    // 没有更多了
                                    self.storageMaterialNoMore = true;
                                } else {
                                    self.storageMaterialIndex = self.storageMaterialIndex + 1;
                                }
                                var arr = self.storageMaterialList;
                                self.storageMaterialList = arr.concat(res.data);
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });

                },



                // 获取当前项目的仓库背景图片
                getStorageBgImg() {
                    var self = this;
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {},
                        url: baseUrl + '/Material/GetProjectMapId',
                        data: {
                            projectId: self.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.success) {
                                self.formatStorageBgImg(res.data);
                                // console.log(res)
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });
                },

                // 处理获取到的仓库背景图片的地址格式
                formatStorageBgImg(file) {
                    var self = this;
                    if (file.length > 0) {
                        var img = new Image();
                        img.onload = function () {
                            // 背景图片加载完成 设置外部容器
                            self.storageImgData = {
                                id: file.split(",")[0],
                                name: file.split(",")[1],
                                url: img.src
                            };
                            // 处理图片格式 设置对应的宽高
                            var imgWidth = img.naturalWidth;
                            var imgHeight = img.naturalHeight;
                            if (imgWidth > $("#storage-container").width()) {
                                $("#img-container").css("width", "100%");
                            } else {
                                $("#img-container").css("width", imgWidth + "px");
                            }
                            // 获取当前项目下的所有仓库
                            self.getAllStorageList();

                        };
                        img.src = baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + file.split(',')[0];
                    }
                },
                // 需要传递projectId
                getAllStorageList() {
                    var self = this;
                    xLoading(true, '正在加载')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Material/GetStorageInfos',
                        data: JSON.stringify({
                            projectId: self.projectId,
                            isUse: 1
                        }),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.success) {
                                self.handleResStorageList(res.data);
                                // console.log(res)
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });
                },

                // 处理仓库列表数据
                handleResStorageList(list) {
                    var itemWidth = 36;
                    var itemHeight = 48;
                    var containerWidth = $("#img-container").width();
                    var containerHeight = $("#img-container").height();
                    list.forEach(function (item, index) {
                        // piexly pixelx
                        item.pixelx = containerWidth * item.pixelx / 100 - itemWidth / 2;
                        item.piexly = containerHeight * item.piexly / 100 - itemHeight;

                    });

                    this.allStorageList = JSON.parse(JSON.stringify(list));
                    // 仓库类型 1室内 2室外 3临时
                },


                // tab切换
                changeTabIndex(e) {
                    var event = e || window.event;
                    var target = event.target || event.srcElement;

                    if (target.className.indexOf("tab-item") !== -1) {
                        var dataset = target.dataset;
                        var idx = parseInt(dataset.idx);
                        if (idx === this.tabIndex) {
                            return
                        }
                        this.tabIndex = idx;
                    }
                },

                // 获取待办任务列表
                getTodoTaskList() {
                    var self = this;
                    self.todoIsLoading = true;
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/workflow/GetWorkTodoList',
                        data: JSON.stringify({
                            page: self.todoPageIndex,
                            rows: self.todoPageSize
                        }),
                        dataType: 'json',
                        success: function (res) {
                            // console.log(res)
                            // xLoading(false);
                            self.todoIsLoading = false;
                            var total = res.total;
                            if (self.todoPageIndex * self.todoPageSize >= total) {
                                // 没有更多了
                                self.todoNoMore = true;
                            } else {
                                self.todoPageIndex = self.todoPageIndex + 1;
                            }
                            var list = res.rows;
                            // 处理时间格式 DateAccepted DateCreated
                            list.forEach(function (item) {
                                item.DateAccepted = self.formatTaskDate(item.DateAccepted);
                                item.DateCreated = self.formatTaskDate(item.DateCreated);
                            });

                            var arr = self.todoTaskList;
                            self.todoTaskList = arr.concat(list);
                            // console.log(self.todoTaskList);
                            self.todoTaskTotal = total;
                        }
                    });
                },


                formatTaskDate(time) {
                    var timeStamp = time.split("(")[1].split(")")[0];
                    return this.timestampToTime(timeStamp);
                },

                timestampToTime(timestamp) {
                    var date = new Date(parseInt(timestamp));
                    var Y = date.getFullYear() + '-';
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    var D = date.getDate() + ' ';
                    var h = date.getHours() + ':';
                    var m = date.getMinutes() + ':';
                    var s = date.getSeconds();
                    return Y + M + D + h + m + s;
                },

                // 子工序全选操作
                allSelectOperate() {
                    // 当前的 如果有一个没选 则进行全选 全是选择的则取消所有选择
                    if (this.curProcessChildrenList.length > (this.referChildrenList.length + this.curSelectChildList.length)) {
                        // 还有剩下的没选择 进行全选操作
                        this.allSelectTypeOperate(1);
                    } else {
                        // 进行取消全选操作
                        this.allSelectTypeOperate(0);
                    }
                },

                allSelectTypeOperate(type) {
                    // type 1 全选 type 0 全不选
                    var list = this.curProcessChildrenList;
                    var refer = this.referChildrenList;
                    // 将已经选择的清空
                    this.curSelectChildList = [];
                    var selectList = [];
                    list.forEach(function (item, index) {
                        var idx = refer.findIndex(function (referItem) {
                            return referItem.id === item.id
                        });

                        if (idx === -1) {
                            item.status = type;
                            if (type === 1) {
                                selectList.push(item.id);
                                list[index].status = 1;
                            } else {
                                list[index].status = 0;
                            }

                        }
                    });
                    this.curProcessChildrenList = list;
                    this.curSelectChildList = selectList;
                },

                // 更新子工序完成状态
                updateProcessChildren(floor) {
                    var id = floor.id;
                    var status = floor.status;
                    var list = this.curSelectChildList;
                    var self = this;
                    if (status === 0) {
                        // 未开始
                        this.showMsg("当前楼层未开始！", "warning");
                        return
                    }
                    if (status === 2) {
                        // 已完成
                        this.showMsg("当前楼层已完成！", "warning");
                        return
                    }
                    if (list.length === 0) {
                        this.showMsg("请选择需要更新的子工序！", "warning");
                        return
                    }
                    xLoading(true, '正在加载')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/UpdateSubProcStatusByFloorId',
                        data: JSON.stringify({
                            floorId: id,
                            subProcIdList: list
                        }),
                        dataType: 'json',
                        success: function (res) {

                            xLoading(false)
                            if (res.success) {
                                self.showMsg("进度更新成功");
                                self.curSelectChildList = [];
                                self.getProgressList();
                                self.getCurProcessChildrenList(id);
                                // console.log(res)
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });
                },

                // 选择子工序
                changeChildProcessSelect(item, index) {
                    var prevList = JSON.parse(JSON.stringify(this.referChildrenList));
                    var operateId = item.id;
                    var hasFinishArr = prevList.filter(function (prevItem) {
                        return prevItem.id === operateId
                    });
                    if (hasFinishArr.length > 0) {
                        this.showMsg("当前子工序已完成！", "warning");
                        return
                    } else {
                        var arr = this.curProcessChildrenList;
                        // arr[index].status = arr[index].status === 0 ? 1 : 0;
                        // // 0 未完成  1完成
                        // if(arr[index].status === 1){

                        // }
                        var selectList = this.curSelectChildList;
                        var curItem = arr[index];
                        if (curItem.status === 0) {
                            // 未完成 变 完成
                            curItem.status = 1;
                            selectList.push(curItem.id);
                        } else {
                            // 完成变 未完成
                            curItem.status = 0;
                            selectList.forEach(function (item, index) {
                                if (item === operateId) {
                                    selectList.splice(index, 1);
                                }
                            });
                        }
                        this.curSelectChildList = selectList;

                        this.curProcessChildrenList = arr;
                    }
                },

                // 选择操作当前的楼层的工序下的子工序
                getCurProcessChildrenList(id) {
                    var self = this;
                    // var id = item.id;
                    // xLoading(true, '正在加载')
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetSubProcessListWithFloorId',
                        data: JSON.stringify({
                            floorId: id
                        }),
                        dataType: 'json',
                        success: function (res) {
                            // xLoading(false)
                            if (res.success) {
                                self.$nextTick(function () {
                                    this.curProcessChildrenList = res.data;
                                    // 将完成状态的子工序保存下来
                                    var arr = JSON.parse(JSON.stringify(res.data));
                                    var list = [];
                                    arr.forEach(function (item) {
                                        if (item.status === 1) {
                                            list.push(item);
                                        }
                                    });
                                    this.referChildrenList = list;

                                })
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });
                },
                // 选择主体
                changeMainIndex(index) {
                    if (this.mainIndex === index) {
                        return
                    }
                    this.mainIndex = index;
                    this.formatCurProgressShowDetail();
                },

                // 展示消息提示
                showMsg(msg, type) {
                    msg = msg || "成功";
                    type = type || "success"
                    this.$message({
                        message: msg,
                        type: type
                    });
                },
                getProgressList() {
                    var self = this;
                    xLoading(true, '正在加载')
                    $.ajax({
                        type: 'post',
                        // headers: {
                        //     'Content-Type': 'application/json'
                        // },
                        url: baseUrl + '/ConstructionPlan/GetProjectProcess',
                        // data: JSON.stringify({
                        //     projectId: "G000117"
                        // }),
                        data: {},
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (res.success) {
                                // 处理mainList
                                self.handleMainList(res.data);
                                // 索引置为0
                                // self.mainIndex = 0;
                                // 保存所有的主体进度列表
                                self.allProgressList = JSON.parse(JSON.stringify(res.data.mainList));

                                // 保存当前的主体的进度列表
                                // self.curProgressList = self.allProgressList.length > 0 ? self.allProgressList[self.mainIndex] : [];
                                // 处理当前的进度列表的展示数据
                                self.formatCurProgressShowDetail();
                            } else {
                                self.showMsg(res.msg, "warning");
                            }
                        }
                    });
                },

                // 处理当前主体的展示数据
                formatCurProgressShowDetail() {
                    var data = this.allProgressList.length > 0 ? this.allProgressList[this.mainIndex] : [];
                    if (data.processList && data.processList.length > 0) {
                        this.handleProcessList(data);
                        this.handleCurProcessProgress(data);
                    }
                },
                // 当前主体的楼层的pop显示
                showFloorItemPop(idx, index, type) {
                    var parentList = this.curProgressList;
                    var list = parentList[idx];
                    if (type === 1) {
                        list.topFloorList[index].isPopShow = !list.topFloorList[index].isPopShow;
                    } else {
                        list.downFloorList[index].isPopShow = !list.downFloorList[index].isPopShow;
                    }
                    // list[index].isPopShow = true;
                    this.$nextTick(function () {
                        this.curProgressList = parentList;
                    });
                },

                // 处理当前展示的主体的所有工序进度的列表
                handleCurProcessProgress(data) {
                    // data = JSON.parse(JSON.stringify(data));
                    var self = this;
                    var arr = JSON.parse(JSON.stringify(data.processList));
                    arr.forEach(function (item) {
                        // item.downFloorList.forEach(function (floorItem) {
                        //     // floorItem.isPopShow = false;
                        //     self.$set(floorItem, "isPopShow", false);
                        // });
                        // item.topFloorList.forEach(function (floorItem) {
                        //     // floorItem.isPopShow = false;
                        //     self.$set(floorItem, "isPopShow", false);
                        // });
                        item.downFloorList.reverse();
                        // console.log(item.downFloorList)
                        item.topFloorList.reverse();
                        // console.log(item.topFloorList)
                    });
                    // console.log(this.curProgressList)
                    this.curProgressList = arr;
                },

                // 获取工序列表
                handleProcessList(data) {
                    var list = data.processList;
                    var processArr = [];
                    list.forEach(function (item) {
                        var itemObj = {
                            id: item.id,
                            name: item.name
                        };
                        processArr.push(itemObj);
                    });
                    this.processList = JSON.parse(JSON.stringify(processArr));
                },

                // 处理mainList
                handleMainList(data) {
                    var list = data.mainList;
                    var mainArr = [];
                    list.forEach(function (item) {
                        var itemObj = {
                            id: item.id,
                            name: item.name
                        };
                        mainArr.push(itemObj)
                    });
                    this.mainList = mainArr;
                }
            }
        })
    </script>
</body>

</html>